<template>
    <div class="detail" v-show="!!videoPath">
        <video :src="videoPath" style="display: block; max-width: 100%; margin: 0 auto;" class="detail-video" autoplay loop controls>您的浏览器不支持视频播放</video>
    </div>
</template>

<script>

export default {
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data(row) {
            this.videoPath = row['videoPath']
            // this.videoPath = 'http://vjs.zencdn.net/v/oceans.mp4'
        }
    },
    data() {
        return {
            videoPath: ''
        }
    }
}
</script>

<style lang="scss" scoped>
.detail {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    &-video {
        max-height: 800px;
    }
}
</style>
